<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<html>
<head>
    <title>登录页</title>
    <%--echart线图、柱状图、饼图等各种图型库 cdn--%>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <%--jquery cdn--%>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>

职级 <select name="zhiji">
    <option value="">请选择</option>
    <c:forEach items="${gradeList}" var="g">
        <option value="${g.id}">${g.name}</option>
    </c:forEach>
</select><br>
描述 <input name="miaoshu">

<button onclick="zxt()">点击展示折线图</button>
<button onclick="excel()">点击导出Excel</button>

<div id="main" style="width: 600px;height: 600px"></div>

</body>

<script>

function excel() {

    let zhiji = $('[name=zhiji]').val();
    let miaoshu = $('[name=miaoshu]').val();

    location.href = '/excel.do?zhiji=' + zhiji + "&miaoshu=" + miaoshu
}

function zxt() {

    let zhiji = $('[name=zhiji]').val();
    let miaoshu = $('[name=miaoshu]').val();


    $.ajax({
        url:'/zxt.do?zhiji=' + zhiji + "&miaoshu=" + miaoshu,

        success:function (data) {
            console.log(data)

            var x = [];
            var y = [];

            for (let i = 0; i < data.length; i++) {
                x.push(data[i].xdata)
                y.push(data[i].ydata)
            }


            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: y,
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);

        }
    })

}



</script>
</html>